<!DOCTYPE html>

<!-- Example for using one single webphone instances on multiple pages by passing the webphone handle between the pages -->

<html>
<head>
    <meta charset="utf-8" />
    <title>Webphone multi page demo</title>  	
	<script src="../webphone_api.js?jscodeversion=338"></script>
	
</head>
<body>
	<H1 align="center"> Webphone multi page example </H1>
	<div>
	This is a demonstration to use the same webphone instance on multiple pages.<br /> 
	For example you can begin a call on page A, launch a new page (page B started from page A), see the webphone status also on page B, then hangup the call either for page A or page B<br />
	It is not limited to only 2 pages. You can launch as many pages as you wish and the same webphone instance will be shared across all pages.<br />
	Here we are just using the onEvents(callback) webphone api to display the webphone state on our "events" div, however you can implement any other functionality in the same way using the other callbacks.<br />
	For the sake of simplicity we are using the same html file also for second pages here (multipage_example.html), but you can use also different pages, just make sure to add the below multipage handling in all your pages.<br />
	For this example to work, you need to:
    <ul>
		<li>	make sure that you are running this html from your webphone directory (copy this file to your webphone folder)</li>
		<li>	set the serveraddress/username/password parameters to a valid value (in the webphone_api.js or add code to set these dynamically with setparameter())</li>
		<li>	set the autostart parameter to false (in the webphone_api.js or add code to set these dynamically with setparameter())</li>
		<li>	rewrite the 'testivr' callto number in this html (In this example the called numbers is is hardcoded to "testivr3", so you need to rewrite this below to a valid number to call via your SIP server or pass a valid number from your form or via API)</li>
	</ul>	
	You can open any number of windows/tabs and push the Call and Hangup buttons on any page (you can add more functionality in the same way as these are implemented in this example)
	Note: the webphone will be closed if you close the "main" page (from where it was started the first time), but if needed, it will auto start again on new pages.
    </div>
	<br />	<br />
	<button onclick="newpage();">Open New Page</button><br /><br />
	<!-- <button onclick="start();">Start the webphone</button><br /><br /> --> 
	<button onclick="call();">Call</button><br /><br />	
	<button onclick="hangup();">Hangup</button><br /><br />
	<div id="events"></div>

    <script>	   
	
		//calling multipage_init() from the window.onload event (delete this and put multipage_init() on your own window.onload if you already have such a function elsewhere)
		window.onload = multipage_init;
		//you might call multipage_destory() from page unload to handle if the "main" page was closed (to be able to reinit the webphone on other pages if needed)
		window.onunload = multipage_destory;		
		//store the wopener variable to be used here and also on subsequent pages (useful if we open a third page from the second and so)
		var wpwindow = window;  //set to this document
		//create a reference to the webphone so we can easily access it on this page via this variable
		var wpapi = webphone_api;
		//variable to store the child window
		var childwindow = null;			
		
		function multipage_init()
		{			
			try{
				//find the page holding the webphone ("main" window)
				if(window.opener && wpwindow != window.opener && window.opener.webphone_api)
				{					
					wpwindow = window.opener; //set to parent page document										
					try{ document.getElementById('events').innerHTML = wpwindow.document.getElementById('events').innerHTML;  } catch (e) {}//display the webphone current status from the opener page 							
				}
				if(wpwindow.wpwindow && wpwindow != window && wpwindow.wpwindow.webphone_api)
				{					
					wpwindow = wpwindow.wpwindow;  //the parent page might also loaded from its own parent, so load it from there
					
				}
				
				//Initialize your webphone if not initialized yet
				var startednow = false;
				if(wpwindow && wpwindow.webphone_api)
				{					
					//load the wpapi instance from the parent page in this case
					wpapi = wpwindow.webphone_api;				
					
					//check if already initialized
					if(wpapi.isstarted != 1)
					{
						wpapi.isstarted = 1;					
						startednow = true;	
						//we are staring the engine here, however you can delay the start if you wish to the point when the user actually wish to use the phone such as making a cal;	wpapi.start();						
						wpapi.start();
						wpapi.isstarted = 2;	
					}	
					//else already initialized by parent
				}
				else if(wpapi && wpapi.isstarted != 1)
				{				    
					//we are the first page				
					wpapi.isstarted = 1;
					wpwindow = window; //set the wopener to point to this page 	
					startednow = true;	
					//we are staring the engine here, however you can delay the start if you wish to the point when the user actually wish to use the phone such as making a cal;	wpapi.start();					
					wpapi.start(); 
					wpapi.isstarted = 2;
				}
				
				if(!wpapi)
				{			
					alert('cannot find the webphone (you have not included the webphone_api.js script in this page?)'); 
					return;  
				}
											
				if(startednow == true) //so we set the callbacks only on the "main" page from where the webphone was started
				{								
					wpapi.onLoaded(function ()
					{			   			
						var calledfrom = [];
						calledfrom.push(window);
						webphoneloaded(calledfrom);
					});
							
					
					wpapi.onEvents(function (evt)
					{
						var calledfrom = [];
						calledfrom.push(window);
						displayevents(calledfrom, evt);
					});
				}	
			} catch (e) 
			{
				alert("Error on multipage setup: "+e);
			}	
				
		}
		
		//clear the wpapi instance (helpful in the case when the "main" page was closed but we still wish to use the webphone)
		function multipage_destory() 
		{     
			try{
			if(wpapi && wpapi === window.webphone_api)
			{							
				wpapi.isstarted = 0; 
				wpapi = null;
				var calledfrom = [];
				calledfrom.push(window);
				multipage_destory_ex(calledfrom);				
			}	
			} catch (e) {}			
        }
		
		//propagate page close to child/parent pages if any
		function multipage_destory_ex(calledfrom) 
		{      
			try{
				if(wpapi)
				{
					wpapi.isstarted = 0; 
					wpapi = null;				
				}				
							
				//we send it also to other pages, so they can also display or handle the status
				if(wpwindow && wpwindow !== window && calledfrom.indexOf(wpwindow) < 0)
				{					
					try{
						calledfrom.push(window);
						wpwindow.multipage_destory_ex(calledfrom);
					} catch (e) {}
				}
				if(childwindow && childwindow !== window && childwindow !== wpwindow && calledfrom.indexOf(childwindow) < 0)
				{					
					try{
						calledfrom.push(window);
						childwindow.multipage_destory_ex(calledfrom);
					} catch (e) {}
				}
			} catch (e) {}
        }		
		
		//handle callbacks from the webphone (you will need to handle most callback events the same way: so you need to call also the parent event handler)			
		function webphoneloaded(calledfrom)
		{
		    /*
			//add any code here after your needs
						
			//notify also the other windows if needed
			if(wpwindow && wpwindow !== window && calledfrom.indexOf(wpwindow) < 0)
			{
			    //notify also the parent page (if needed)
				try{
					calledfrom.push(window);
					wpwindow.webphoneloaded(calledfrom);
				} catch (e) {}
			}
			if(childwindow && childwindow !== window && childwindow !== wpwindow && calledfrom.indexOf(childwindow) < 0)
			{
				//notify also the child page (if needed)
				try{
					calledfrom.push(window);
					childwindow.webphoneloaded(calledfrom);
				} catch (e) {}
			}
			*/			
		}
		
		//display the webphone status on the "events" div and propagate to child and parent pages if any
		function displayevents(calledfrom, evt)
		{
			document.getElementById('events').innerHTML = evt;
			
			//we send it also to other pages, so they can also display or handle the status
			if(wpwindow && wpwindow !== window && calledfrom.indexOf(wpwindow) < 0)
			{
			    //display also on the parent page
				try{
					calledfrom.push(window);
					wpwindow.displayevents(calledfrom,evt);
				} catch (e) {}
			}
			if(childwindow && childwindow !== window && childwindow !== wpwindow && calledfrom.indexOf(childwindow) < 0)
			{
				//display also on the child page
				try{
					calledfrom.push(window);
					childwindow.displayevents(calledfrom,evt);
				} catch (e) {}
			}
		}
		
		/*
		//called from button click (this is needed only if you don't wish to auto-start it on the first page or via first call(). remove start() from the above code if you need to start explicitely)
		function start()
		{
			if(!wpapi)
			{				
				//it might be possible that the "main" page was closed meantime, so we try to reinit
				multipage_init();
				if(!wpapi)
				{
					alert('cannot find the webphone');
					return;
				}
			}
			
			if(wpapi.isstarted == 2)
			{
				//alert('already started once');
				return;
			}			
			wpapi.start();		    
			wpapi.isstarted = 2;
		}
		*/
		
		//called from button click
		function newpage()
		{
			//we start the same page here as a simple example, but you can start any other page in the same way. just make sure to include the same multi-page handling code in each of your pages
			childwindow = open('multipage_example.html');									
		}
		
		//called from button click
		function call()
		{			
			if(!wpapi)
			{				
				//it might be possible that the "main" page was closed meantime, so we try to reinit
				multipage_init();
				if(!wpapi)
				{
					alert('cannot find the webphone');
					return;
				}
			}
			wpapi.call('testivr3');	
		}
		
		//called from button click
		function hangup()
		{		
			if(!wpapi)
			{
				alert('cannot find the webphone');
				return;			
			}
			wpapi.hangup();	
		}

        
    </script>
</body>
</html>
